<template>
  <div class="export-graph-div">
    <modal-dialog :width="width" :height="height" @close="$close">
      <div slot="header" class="c-header">{{ title }}</div>
      <div slot="body" class="c-body">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="文件名称">
            <el-input v-model="form.name" size="mini" />
          </el-form-item>
          <el-form-item label="文件类型">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="导出比例">
            <el-input-number v-model="form.scale" size="mini" :min="0" :max="10" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="text" @click.native="onSubmit">确认</el-button>
        <el-button type="text" @click.native="onCancel">取消</el-button>
      </div>
    </modal-dialog>
  </div>
</template>

<script>
import ModalDialog from '@/components/ModalDialog'
import { mapState } from 'vuex'

export default {
  components: {
    ModalDialog
  },
  props: {
    width: {
      type: Number,
      required: false,
      default: 300
    },
    height: {
      type: Number,
      required: false,
      default: 300
    },
    title: {
      type: String,
      required: false,
      default: '导出通风网络图'
    },
    msg: {
      type: String,
      default: '默认欢迎'
    }
  },
  data() {
    return {
      options: [
        {
          value: 'svg',
          label: '可缩放矢量图形(*.svg)'
        },
        {
          value: 'png',
          label: '便携式网络图形(*.png)'
        },
        {
          value: 'jpeg',
          label: '高压缩有损图形(*.jpeg)'
        },
        {
          value: 'dxf',
          label: 'AutoCAD图形交换文件(*.dxf)'
        },
        {
          value: 'txt',
          label: '通风网络拓扑数据文件(*.txt)'
        }
      ],
      form: {
        name: '新建文档',
        type: 'svg',
        scale: '2'
      }
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      config: 'config'
    })
  },
  mounted() {
    this.form.name = this.config.document.name
  },
  methods: {
    resetForm() {
      // 重置表单
      this.$refs['form'].resetFields()
    },
    // 取消
    onCancel() {
      // 关闭对话框
      this.$close()
      // 重置表单
      this.resetForm()
    },
    // 确定
    onSubmit() {
      // 关闭对话框
      this.form.name = this.form.name.replace(/^\s+|\s+$/g, '')
      this.$close(this.form)
    }
  }
}
</script>

<style lang="scss">
.export-graph-div {
  // .dialog-header {
  //   .c-header {
  //     font-size: 16px;
  //     text-align: center;
  //   }
  // }
  .dialog-body {
    // @import '../../style/form.scss';
    .c-body {
      padding: 10px 10px !important;

      // .el-color-predefine__color-selector {
      //   border: 0.5px solid gray !important;
      // }
    }
  }
  .dialog-footer {
    @import '../../style/form.scss';
    .el-button {
      font-size: 16px !important;
    }
  }
}
</style>
